<template>
	<view>
		<uni-popup ref="popup" :is-mask-click="false" type="bottom" background-color="#f5f5f5">
			<view class="p-24">
				<view class="flex item-center">
					<image class="size-24" src="@/static/image/login-logo.png"></image>
					<text class="ml-8 text-color-regular fs-14 font-semibold">火动通告</text>
				</view>
				<view class="flex-col">
					<text class="mt-20 text-color-regular fs-16 font-semibold">申请获取你的头像与昵称</text>
					<text class="mt-6 text-color-hint fs-14 font-normal">方便与团长、顾客的识别与沟通</text>
				</view>
				<view class="radius-12 bg-white px-20 mt-14 mb-32">
					<view class="flex justify-between item-center" style="height:112px;">
						<text class="fs-16 text-color-regular">头像</text>
						<view class="inline-flex item-center">
							<view class="flex-1"></view>
							<button open-type="chooseAvatar" @chooseavatar="chooseAvatar" class="avatar-btn">
								<image :src="formData.avatar" class="" style="width:52px;height:52px;border-radius:50%;background-color:#999;"></image>
							</button>
						</view>
					</view>
					<view class="h-1 bg-default"></view>
					<view class="flex justify-between item-center" style="height:71px;">
						<text class="fs-16 text-color-regular">昵称</text>
						<input id="nickName" class="leading-22" style="text-align:end;"
							v-model="formData.nickName" @blur="onBlur" type="nickname"
							placeholder="请输入用户昵称" />
					</view>
				</view>
				<button class="uni-primary flex center radius-20 h-38" style="line-height:38px;" type="warn" @click="submit">保存</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		toRaw,
	} from 'vue'
	import {
		uploadFileApi
	} from '@/api/common.js'

	const emits = defineEmits(['onSubmit'])

	const instance = getCurrentInstance()
	const popup = ref(null)
	const show = ref(false)


	const chooseAvatar = ({
		detail
	}) => {
		if (detail.avatarUrl) {
			uploadFileApi(0, {
				name: 'file',
				filePath: detail.avatarUrl
			}).then(res => {
				if (res.code === 200) {
					formData.value.avatar = res.data
				}
			})
		}
	}

	const formData = ref({
		nickName: '',
		avatar: ''
	})

	const onBlur = ({
		detail
	}) => {
		formData.value.nickName = detail.value
	}

	const showPopup = (val) => {
		if (val) {
			popup.value.open()
		} else {
			popup.value.close()
		}
	}

	const submit = () => {
		if (!formData.value.avatar) {
			uni.showToast({
				icon: 'none',
				title: '请选择头像'
			})
			return
		} else if (!formData.value.nickName) {
			uni.showToast({
				icon: 'none',
				title: '请输入用户昵称'
			})
			return
		}

		emits('onSubmit', toRaw(formData.value))
	}

	defineExpose({
		showPopup
	})
</script>

<style lang="scss" scoped>
	.avatar-btn {
		margin: 0;
		padding: 0;
		box-sizing: content-box;
		background-color: transparent;
		border: none;
		display: flex;

		&::after {
			border: none;
		}
	}
</style>